<template>
  <div class="news-container">
    <!-- 顶部横幅 -->
    <div class="news-header">
      <div class="header-content">
        <h1>资讯中心</h1>
        <p>获取最新的技术资讯、学习动态和行业趋势</p>
        
        <div class="search-section">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索资讯、技术、关键词..."
            size="large"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
            <template #append>
              <el-button type="primary" @click="handleSearch">
                搜索
              </el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <div class="nav-content">
        <div class="category-tabs">
          <div 
            v-for="category in categories" 
            :key="category.key"
            class="category-tab"
            :class="{ active: activeCategory === category.key }"
            @click="activeCategory = category.key"
          >
            <el-icon><component :is="category.icon" /></el-icon>
            <span>{{ category.label }}</span>
            <el-badge 
              v-if="category.count > 0" 
              :value="category.count" 
              class="category-badge"
            />
          </div>
        </div>
        
        <div class="nav-actions">
          <el-select v-model="sortBy" placeholder="排序方式" style="width: 120px">
            <el-option label="最新发布" value="latest" />
            <el-option label="最受欢迎" value="popular" />
            <el-option label="最多评论" value="comments" />
            <el-option label="最多点赞" value="likes" />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="news-main">
      <!-- 左侧：文章列表 -->
      <div class="news-left">
        <!-- 置顶文章 -->
        <div v-if="activeCategory === 'all' && pinnedArticles.length > 0" class="pinned-section">
          <h3>置顶推荐</h3>
          <div class="pinned-articles">
            <div 
              v-for="article in pinnedArticles" 
              :key="article.id"
              class="pinned-article"
              @click="viewArticle(article)"
            >
              <div class="article-image">
                <img :src="article.cover" :alt="article.title" />
                <div class="article-overlay">
                  <el-tag type="danger" size="small">置顶</el-tag>
                </div>
              </div>
              <div class="article-content">
                <h4>{{ article.title }}</h4>
                <p>{{ article.summary }}</p>
                <div class="article-meta">
                  <span class="author">{{ article.author }}</span>
                  <span class="date">{{ formatDate(article.publishTime) }}</span>
                  <span class="views">{{ formatNumber(article.views) }}阅读</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 文章列表 -->
        <div class="articles-section">
          <div class="section-header">
            <h3>{{ getCategoryTitle() }}</h3>
            <div class="view-toggle">
              <el-button-group>
                <el-button 
                  :type="viewMode === 'list' ? 'primary' : ''"
                  @click="viewMode = 'list'"
                >
                  <el-icon><List /></el-icon>
                </el-button>
                <el-button 
                  :type="viewMode === 'grid' ? 'primary' : ''"
                  @click="viewMode = 'grid'"
                >
                  <el-icon><Grid /></el-icon>
                </el-button>
              </el-button-group>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-if="viewMode === 'list'" class="articles-list">
            <div 
              v-for="article in filteredArticles" 
              :key="article.id"
              class="article-item"
              @click="viewArticle(article)"
            >
              <div class="article-image">
                <img :src="article.cover" :alt="article.title" />
              </div>
              
              <div class="article-content">
                <div class="article-header">
                  <h4>{{ article.title }}</h4>
                  <div class="article-tags">
                    <el-tag 
                      v-for="tag in article.tags.slice(0, 3)" 
                      :key="tag"
                      size="small"
                      class="article-tag"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
                
                <p class="article-summary">{{ article.summary }}</p>
                
                <div class="article-meta">
                  <div class="meta-left">
                    <el-avatar :size="24" :src="article.authorAvatar">
                      {{ article.author.charAt(0) }}
                    </el-avatar>
                    <span class="author">{{ article.author }}</span>
                    <span class="date">{{ formatDate(article.publishTime) }}</span>
                  </div>
                  
                  <div class="meta-right">
                    <div class="stat-item">
                      <el-icon><View /></el-icon>
                      <span>{{ formatNumber(article.views) }}</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><ChatDotRound /></el-icon>
                      <span>{{ article.comments }}</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><Star /></el-icon>
                      <span>{{ article.likes }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 网格视图 -->
          <div v-else class="articles-grid">
            <div 
              v-for="article in filteredArticles" 
              :key="article.id"
              class="article-card"
              @click="viewArticle(article)"
            >
              <div class="card-image">
                <img :src="article.cover" :alt="article.title" />
                <div class="image-overlay">
                  <div class="article-category">{{ article.category }}</div>
                </div>
              </div>
              
              <div class="card-content">
                <h4>{{ article.title }}</h4>
                <p>{{ article.summary }}</p>
                
                <div class="card-tags">
                  <el-tag 
                    v-for="tag in article.tags.slice(0, 2)" 
                    :key="tag"
                    size="small"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                
                <div class="card-footer">
                  <div class="author-info">
                    <el-avatar :size="20" :src="article.authorAvatar">
                      {{ article.author.charAt(0) }}
                    </el-avatar>
                    <span>{{ article.author }}</span>
                  </div>
                  
                  <div class="article-stats">
                    <span class="views">{{ formatNumber(article.views) }}阅读</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[12, 24, 48]"
              :total="totalArticles"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>

      <!-- 右侧：侧边栏 -->
      <div class="news-right">
        <!-- 热门文章 -->
        <div class="sidebar-card">
          <h3>热门文章</h3>
          <div class="hot-articles">
            <div 
              v-for="(article, index) in hotArticles" 
              :key="article.id"
              class="hot-article"
              @click="viewArticle(article)"
            >
              <div class="hot-rank">{{ index + 1 }}</div>
              <div class="hot-content">
                <h5>{{ article.title }}</h5>
                <div class="hot-meta">
                  <span class="views">{{ formatNumber(article.views) }}阅读</span>
                  <span class="comments">{{ article.comments }}评论</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门标签 -->
        <div class="sidebar-card">
          <h3>热门标签</h3>
          <div class="hot-tags">
            <el-tag 
              v-for="tag in hotTags" 
              :key="tag.name"
              class="hot-tag"
              @click="searchByTag(tag.name)"
            >
              {{ tag.name }} ({{ tag.count }})
            </el-tag>
          </div>
        </div>

        <!-- 推荐作者 -->
        <div class="sidebar-card">
          <h3>推荐作者</h3>
          <div class="recommended-authors">
            <div 
              v-for="author in recommendedAuthors" 
              :key="author.id"
              class="author-item"
            >
              <el-avatar :size="40" :src="author.avatar">
                {{ author.name.charAt(0) }}
              </el-avatar>
              <div class="author-info">
                <div class="author-name">{{ author.name }}</div>
                <div class="author-desc">{{ author.description }}</div>
                <div class="author-stats">
                  {{ author.articles }}篇文章 · {{ formatNumber(author.followers) }}关注
                </div>
              </div>
              <el-button size="small" @click="followAuthor(author)">
                {{ author.followed ? '已关注' : '关注' }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 最新评论 -->
        <div class="sidebar-card">
          <h3>最新评论</h3>
          <div class="recent-comments">
            <div 
              v-for="comment in recentComments" 
              :key="comment.id"
              class="comment-item"
            >
              <el-avatar :size="32" :src="comment.userAvatar">
                {{ comment.userName.charAt(0) }}
              </el-avatar>
              <div class="comment-content">
                <div class="comment-user">{{ comment.userName }}</div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-article">
                  评论了《{{ comment.articleTitle }}》
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Search, List, Grid, View, ChatDotRound, Star,
  Monitor, Document, Reading, Trophy, TrendCharts
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref('all')
const sortBy = ref('latest')
const viewMode = ref('list')
const currentPage = ref(1)
const pageSize = ref(12)
const totalArticles = ref(156)

// 分类配置
const categories = ref([
  { key: 'all', label: '全部资讯', icon: 'Document', count: 156 },
  { key: 'tech', label: '技术前沿', icon: 'Monitor', count: 45 },
  { key: 'tutorial', label: '学习教程', icon: 'Reading', count: 38 },
  { key: 'industry', label: '行业动态', icon: 'TrendCharts', count: 28 },
  { key: 'career', label: '职场发展', icon: 'Trophy', count: 25 },
  { key: 'tools', label: '工具推荐', icon: 'Star', count: 20 }
])

// 置顶文章
const pinnedArticles = ref([
  {
    id: 'pinned-1',
    title: 'Vue 3.4 正式发布：性能提升与新特性详解',
    summary: 'Vue 3.4 带来了显著的性能提升和多项新特性，包括更好的TypeScript支持...',
    cover: '/images/news-pinned-1.jpg',
    author: '尤雨溪',
    publishTime: new Date('2024-01-15'),
    views: 25600,
    category: 'tech'
  },
  {
    id: 'pinned-2',
    title: '2024年前端开发趋势预测：AI驱动的开发体验',
    summary: '随着AI技术的快速发展，前端开发正在经历前所未有的变革...',
    cover: '/images/news-pinned-2.jpg',
    author: '张三',
    publishTime: new Date('2024-01-12'),
    views: 18900,
    category: 'industry'
  }
])

// 文章列表
const articles = ref([
  {
    id: 1,
    title: 'React 18 并发特性深度解析',
    summary: '深入了解React 18的并发特性，包括Suspense、Concurrent Rendering等核心概念',
    cover: '/images/news-1.jpg',
    author: '李四',
    authorAvatar: '/images/author-1.jpg',
    category: 'tech',
    tags: ['React', 'JavaScript', '前端'],
    publishTime: new Date('2024-01-14'),
    views: 12500,
    comments: 45,
    likes: 128,
    isPinned: false
  },
  {
    id: 2,
    title: 'TypeScript 5.0 新特性完全指南',
    summary: 'TypeScript 5.0 带来了装饰器、const断言、模板字符串类型等重要更新',
    cover: '/images/news-2.jpg',
    author: '王五',
    authorAvatar: '/images/author-2.jpg',
    category: 'tutorial',
    tags: ['TypeScript', '教程', '前端'],
    publishTime: new Date('2024-01-13'),
    views: 9800,
    comments: 32,
    likes: 95,
    isPinned: false
  },
  {
    id: 3,
    title: '微前端架构实践：从0到1构建企业级应用',
    summary: '分享微前端架构的设计思路、技术选型和实际落地经验',
    cover: '/images/news-3.jpg',
    author: '赵六',
    authorAvatar: '/images/author-3.jpg',
    category: 'tech',
    tags: ['微前端', '架构', '企业级'],
    publishTime: new Date('2024-01-11'),
    views: 15600,
    comments: 67,
    likes: 203,
    isPinned: false
  }
  // 更多文章数据...
])

// 热门文章
const hotArticles = ref([
  {
    id: 'hot-1',
    title: 'ChatGPT在前端开发中的应用实践',
    views: 45600,
    comments: 128
  },
  {
    id: 'hot-2',
    title: 'Vite 4.0 性能优化最佳实践',
    views: 38900,
    comments: 95
  },
  {
    id: 'hot-3',
    title: 'Web3.0时代的前端开发机遇',
    views: 32100,
    comments: 76
  },
  {
    id: 'hot-4',
    title: 'Next.js 13 App Router完全指南',
    views: 28700,
    comments: 54
  },
  {
    id: 'hot-5',
    title: '前端监控系统搭建实战',
    views: 25300,
    comments: 43
  }
])

// 热门标签
const hotTags = ref([
  { name: 'JavaScript', count: 245 },
  { name: 'Vue', count: 189 },
  { name: 'React', count: 156 },
  { name: 'TypeScript', count: 134 },
  { name: '前端工程化', count: 98 },
  { name: 'Node.js', count: 87 },
  { name: 'CSS', count: 76 },
  { name: '性能优化', count: 65 }
])

// 推荐作者
const recommendedAuthors = ref([
  {
    id: 1,
    name: '阮一峰',
    avatar: '/images/author-ruanyifeng.jpg',
    description: '前端技术专家，《ES6标准入门》作者',
    articles: 156,
    followers: 89000,
    followed: false
  },
  {
    id: 2,
    name: '尤雨溪',
    avatar: '/images/author-evan.jpg',
    description: 'Vue.js 作者，前端框架专家',
    articles: 89,
    followers: 125000,
    followed: true
  },
  {
    id: 3,
    name: '张鑫旭',
    avatar: '/images/author-zhangxinxu.jpg',
    description: 'CSS专家，《CSS世界》作者',
    articles: 234,
    followers: 67000,
    followed: false
  }
])

// 最新评论
const recentComments = ref([
  {
    id: 1,
    userName: '小明',
    userAvatar: '/images/user-1.jpg',
    content: '这篇文章写得很详细，学到了很多！',
    articleTitle: 'React 18 并发特性深度解析'
  },
  {
    id: 2,
    userName: '小红',
    userAvatar: '/images/user-2.jpg',
    content: '作者的实践经验很有价值',
    articleTitle: '微前端架构实践指南'
  },
  {
    id: 3,
    userName: '小刚',
    userAvatar: '/images/user-3.jpg',
    content: '期待更多这样的深度文章',
    articleTitle: 'TypeScript 5.0 新特性'
  }
])

// 计算属性
const filteredArticles = computed(() => {
  let filtered = articles.value

  // 分类筛选
  if (activeCategory.value !== 'all') {
    filtered = filtered.filter(article => article.category === activeCategory.value)
  }

  // 搜索筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(article =>
      article.title.toLowerCase().includes(keyword) ||
      article.summary.toLowerCase().includes(keyword) ||
      article.tags.some(tag => tag.toLowerCase().includes(keyword)) ||
      article.author.toLowerCase().includes(keyword)
    )
  }

  // 排序
  switch (sortBy.value) {
    case 'popular':
      filtered.sort((a, b) => b.views - a.views)
      break
    case 'comments':
      filtered.sort((a, b) => b.comments - a.comments)
      break
    case 'likes':
      filtered.sort((a, b) => b.likes - a.likes)
      break
    default: // latest
      filtered.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime))
  }

  return filtered
})

// 方法
const getCategoryTitle = () => {
  const category = categories.value.find(c => c.key === activeCategory.value)
  return category ? category.label : '全部资讯'
}

const formatDate = (date) => {
  const now = new Date()
  const articleDate = new Date(date)
  const diff = now - articleDate

  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor(diff / (1000 * 60))

  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return '刚刚'
  }
}

const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const handleSearch = () => {
  currentPage.value = 1
  // 执行搜索逻辑
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const viewArticle = (article) => {
  router.push(`/news/article/${article.id}`)
}

const searchByTag = (tagName) => {
  searchKeyword.value = tagName
  handleSearch()
}

const followAuthor = (author) => {
  author.followed = !author.followed
  ElMessage.success(author.followed ? '关注成功' : '取消关注')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.news-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.news-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;

  h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
  }

  p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
  }
}

.search-section {
  max-width: 600px;
  margin: 0 auto;

  .el-input {
    :deep(.el-input__wrapper) {
      background: rgba(255, 255, 255, 0.95);
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  }
}

.category-nav {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 20px 0;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
  }
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--el-fill-color-extra-light);
  white-space: nowrap;

  &:hover {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }

  &.active {
    background: var(--el-color-primary);
    color: white;
  }

  .category-badge {
    margin-left: 4px;
  }
}

.news-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.pinned-section {
  margin-bottom: 30px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }
}

.pinned-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.pinned-article {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  .article-image {
    position: relative;
    height: 160px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .article-overlay {
      position: absolute;
      top: 12px;
      left: 12px;
    }
  }

  .article-content {
    padding: 20px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--el-text-color-primary);
      @include text-ellipsis(2);
    }

    p {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-bottom: 12px;
      @include text-ellipsis(2);
    }

    .article-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.articles-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--el-border-color-extra-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .article-image {
    width: 120px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;

  h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    @include text-ellipsis(2);
  }
}

.article-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;

  .article-tag {
    font-size: 11px;
  }
}

.article-summary {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.4;
  @include text-ellipsis(2);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }

  .meta-right {
    display: flex;
    gap: 12px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.article-card {
  background: white;
  border: 1px solid var(--el-border-color-extra-light);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .card-image {
    position: relative;
    height: 140px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-overlay {
      position: absolute;
      top: 8px;
      left: 8px;

      .article-category {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
      }
    }
  }

  .card-content {
    padding: 16px;

    h4 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--el-text-color-primary);
      @include text-ellipsis(2);
    }

    p {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-bottom: 12px;
      @include text-ellipsis(2);
    }
  }
}

.card-tags {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;

  .el-tag {
    font-size: 10px;
  }
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .author-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--el-text-color-placeholder);
  }

  .article-stats {
    font-size: 11px;
    color: var(--el-text-color-placeholder);
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.sidebar-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;

  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }
}

.hot-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hot-article {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.3s ease;

  &:hover {
    background: var(--el-fill-color-extra-light);
  }

  .hot-rank {
    width: 24px;
    height: 24px;
    background: var(--el-color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .hot-content {
    flex: 1;

    h5 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
      color: var(--el-text-color-primary);
      @include text-ellipsis(2);
    }

    .hot-meta {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hot-tag {
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--el-color-primary);
    color: white;
  }
}

.recommended-authors {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.author-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;

  .author-info {
    flex: 1;

    .author-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .author-desc {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-bottom: 4px;
      @include text-ellipsis(1);
    }

    .author-stats {
      font-size: 11px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.recent-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-item {
  display: flex;
  gap: 8px;

  .comment-content {
    flex: 1;

    .comment-user {
      font-size: 12px;
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-bottom: 2px;
    }

    .comment-text {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-bottom: 2px;
      @include text-ellipsis(2);
    }

    .comment-article {
      font-size: 11px;
      color: var(--el-text-color-placeholder);
      @include text-ellipsis(1);
    }
  }
}
</style>
